
<template >
<!-- 登录表单 -->
<!-- 通过ref调用表单对象 -->
<el-form :model="ruleForm" status-icon :rules="rules" ref="loginFormRef" label-width="100px" class="demo-ruleForm">
 <el-form-item label="用户id" prop="id" class="box">
    <el-input  type="text" v-model="ruleForm.id" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password" class="box">
    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm()">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
    <el-button @click="registerForm()" type="warning">注册</el-button>
  </el-form-item>
</el-form>
 
</template>
<script>
  export default {
    data() {
     return {
       ruleForm:{
         id:"116",
         password:"123456"
       },
      //  表单验证
      rules:{
        id:[
          {required:true,message: "请输入用户ID", trigger: "blur" }
          
        ],
        password:[
          {required: true, message: "请输入登录密码", trigger: "blur"},
          {
             min: 3,
            max: 10,
            message: "长度在 6 到 15 个字符",
          
          }
        ]
      }
     }
    },
    created(){
      // this.getUserlist();
    },
    methods: {
      
      // 表单重置
        resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 登录提交数据
      submitForm(){
        this.$refs.loginFormRef.validate((valid)=>{
          if(!valid) return;
          // 否则
         this.$axios.post(
       "/app/login",  
        {
          id:this.ruleForm.id,
          password:this.ruleForm.password
        }
       ).then((res)=>{
           console.log(res.data);
           
            if(res.data.status!=200){
           return  this.$message.error("登录失败！")
            
          }else{
             this.$message.success("登录成功"); 
           
         window.sessionStorage.setItem("token", this.ruleForm.id);
          this.$router.push("/")
          }
          }) 
         

        })
      },
      // 注册用户
      registerForm(){
 this.$refs.loginFormRef.validate((valid)=>{
          if(!valid) return;
          this.$axios.post(
            "/app/login/register",
             {
          id:this.ruleForm.id,
          password:this.ruleForm.password
        }
          ).then((res)=>{
            if(res.data.status==200){
              this.$message.success("注册成功，现在可以登录");
              setTimeout(()=>{
                this.$router.push('/login')
              },1000)
                
            }
          })
 })
      }

       }
  }
</script>
<style scoped>
.box{
  width: 500px;
 
  margin-left: 25%;
}
</style>
